import ReactQMap from 'react-qmap';
import ReactDOM from 'react-dom'
import { Icon } from 'antd-mobile'
import styles from './index.scss'

const Map = ({ latitude, longitude }) => {
  const removeMap = () => { // 移除元素
    document.getElementById('map').parentNode.removeChild(document.getElementById('map'))
  }
  return (
    <div className={styles.map}>
      <div className={styles.close} onClick={removeMap}>
        <Icon type='cross-circle-o' size='lg' />
        {/* <div className={styles.tips}>点击关闭</div> */}
      </div>
      <ReactQMap
        center={{ latitude, longitude }}
        mySpot={{ latitude, longitude }}
        initialOptions={{ zoomControl: true, mapTypeControl: true }}
        apiKey="NCPBZ-4PXWP-I4WD5-VTYI7-M27RQ-R3FIN"
        style={{ height: '80%' }}    // 高度和宽度默认占父元素的100%
      />
    </div>
  )
}

export default props => {
  const map = document.createElement('div')
  map.id = 'map'
  document.body.appendChild(map)
  ReactDOM.render(<Map {...props} />, document.getElementById('map'))
}